<template>
  <div class="container">
    <div class="app-container">
      <el-button class="permission-btn" size="mini" type="primary" @click="dialogVisible = true">添加权限</el-button>
      <el-table
        :data="list"
        row-key="id"
        default-expand-all
      >
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="code" label="标识" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button v-if="row.type === 1" type="text" size="mini" @click="sonAdd(row)">添加</el-button>
            <el-button type="text" size="mini" @click="edit(row)">编辑</el-button>
            <el-popconfirm
              title="你确定删除该权限点吗？"
              @onConfirm="del(row.id)"
            >
              <el-button slot="reference" type="text" size="mini" style="margin-left: 5px;">删除</el-button>
            </el-popconfirm>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <PermissionDialog
      :id="id"
      ref="permissionDialog"
      :dialog-visible.sync="dialogVisible"
      :flag="flag"
      @updateForm="updateForm"
      @emptyId="emptyId"
      @emptyFlag="emptyFlag"
    />
  </div>
</template>
<script>
import { getPermissionList, getDetail, del } from '@/api/permission'
import { queryListBytree } from '@/utils/index'
import PermissionDialog from '@/views/permission/components/permission-dialog.vue'
export default {
  name: 'Permission',
  components: {
    PermissionDialog
  },
  data() {
    return {
      list: [],
      dialogVisible: false,
      id: null,
      flag: ''

    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {

    emptyId() {
      this.id = null
    },
    emptyFlag() {
      this.flag = ''
    },
    async getPermissionList() {
      try {
        this.list = queryListBytree(await getPermissionList(), 0)
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },
    updateForm() {
      this.getPermissionList()
    },
    sonAdd(row) {
      this.dialogVisible = true
      this.id = row.id
    },

    async edit(row) {
      this.flag = '编辑'
      this.id = row.id
      const res = await getDetail(row.id)
      this.$refs.permissionDialog.permissionForm = res
      this.dialogVisible = true
    },

    async del(id) {
      await del(id)
      this.$message.success('删除成功')
      this.getPermissionList()
    }
  }

}

</script>

<style scoped lang="scss">
.permission-btn{
  margin: 20px 10px;
}

</style>
